import { useEffect } from 'react';
// import type { ParkinglotTableListItem } from '../parkinglot/types';
import type { ParkingLotInfo } from '@/pages/IntellectiveVisialPlatform/types.d';
import { Carousel } from 'antd';
import './index.less';
// eslint-disable-next-line @typescript-eslint/ban-types
const InfoWindow = (props: { item: ParkingLotInfo | null; close: Function }) => {
  const { item, close } = props;
  // useEffect(() => {}, [item]);
  return item ? (
    <div className="infoWindow">
      <div className="decoration">
        <img style={{ width: '100%', height: '100%' }} src="/visual/leftTopDecoration.svg" alt="" />
      </div>
      <div
        className="close"
        onClick={() => {
          close();
        }}
      >
        <img style={{ width: '100%', height: '100%' }} src="/visual/close.svg" alt="" />
      </div>
      <div className="top_parkingName">
        <div className="left">
          <img className="rightTo" src="/visual/toRight.svg" alt="" />
          <img className="radiusDecoration" src="/visual/radiusRactangle.svg" alt="" />
        </div>
        <span>{item.parkingName}</span>
      </div>
      <div className="img">
        {item.imgs.length ? (
          <Carousel
            style={{ height: '100%', width: '100%' }}
            dotPosition="left"
            dots={false}
            autoplay
            effect="fade"
          >
            {item.imgs.map((url) => (
              <img
                style={{ height: '280.11px', width: '140.32px' }}
                key={JSON.stringify(url)}
                src={url}
                alt=""
              />
            ))}
          </Carousel>
        ) : (
          '暂无车场图片'
        )}
      </div>
      <div className="parkingType">{'路内停车场'}</div>
      <div className="location">
        <img className="location_logo" src="/visual/location.svg" alt="" />
        <span>{item.parkingName}</span>
      </div>
      <div className="spaceCount">
        <div className="item">
          <span>{item.totalSpace || 0}</span>
          <span>泊位总数</span>
        </div>
        <div className="item">
          <span>{item.lastSpace || 0}</span>
          <span>空闲</span>
        </div>
        <div className="item">
          <span>{item.occupySpace || 0}</span>
          <span>占用</span>
        </div>
      </div>
    </div>
  ) : (
    <></>
  );
};
export default InfoWindow;
